<!--
 * @Author: huangyq
 * @Date: 2022-04-22 10:09:10
 * @LastEditTime: 2023-12-06 10:20:49
 * @LastEditors: hyq
 * @Description: 过渡页面
 * @FilePath: /vue3-boilerplate-pc-client/src/views/pages/dashboard/index.vue
-->
<template>
  <div class="dashboard">
    <div class="box dashboard_user">
      <span class="dashboard--title">工作台</span>
      <div class="dashboard_user_info">
        <el-avatar
          :size="80"
          fit="fill"
          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        />
        <div class="dashboard_user_info_right">
          <div class="dashboard_user_info_right--welcome">
            你好，{{ userStore.name }}，欢迎登录管理系统
          </div>
          <div class="dashboard_user_info_right--desc">{{ mood }}</div>
        </div>
      </div>
    </div>
    <div class="box dashboard_lately">
      <span class="dashboard--title">最近动态</span>
      <div class="dashboard_lately_scroll">
        <div
          v-for="item in userStore.records"
          :key="item.name"
          class="box dashboard_lately_item"
        >
          <span>
            {{ calculateInterVal(item.lastViewTime) }}， 查看了
            <span style="color: #409eff">{{ item.title }}</span>
            界面
          </span>
          <el-button color="#626aef" plain @click="handleLook(item)"
            >再次查看</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { calculateInterVal } from '@/utils'
import { useRouter } from 'vue-router'
import { useUserStore, IRecordItem } from '@/stores'

const moodList = [
  '天气晴朗,心情好爽。我要努力,奔着自己的目标前进前进前前进。',
  '晴天里有阳光，阳光总是充满温馨，相信有这么多朋友的厚爱和鼓励，晴天会永远阳光灿烂。',
  '不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。',
  '微笑是盛开在人们脸上的一朵美丽的花，时时刻刻散发着迷人的芬芳。',
  '和你在一起的时光全都很耀眼，因为天气好，因为天气不好，因为天气刚刚好。',
  '天气晴朗就心情好，阴雨绵绵就没劲头。做人这么天真也就够了。',
  '与其沉溺过往，不如沐浴晴朗，扔掉悲伤和孤寂，摆脱无助和漠然，不再害怕未知，不必盲目迷茫。'
]
const mood = moodList[Math.ceil(Math.random() * (moodList.length - 1))]

// 获取访问记录
const userStore = useUserStore()

// 再次查看
const router = useRouter()
function handleLook(item: IRecordItem) {
  router.push({
    name: item.name,
    query: item.query,
    params: item.params
  })
}
</script>

<style scoped lang="scss">
.dashboard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  &--title {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    display: block;
    border-bottom: 1px solid #efefef;
    margin-bottom: 10px;
  }
  &_user {
    &_info {
      display: flex;
      height: 80px;
      &_right {
        margin-left: 20px;
        line-height: 40px;
        &--welcome {
          font-size: 18px;
        }
        &--desc {
          color: #ccc;
          font-size: 14px;
        }
      }
    }
  }
  &_lately {
    margin-top: 10px;
    flex: 1;
    &_scroll {
      overflow: auto;
    }
    &_item {
      height: 60px;
      border-bottom: 1px solid #efefef;
      display: flex;
      justify-content: space-between;
      color: #333;
      align-items: center;
      font-size: 14px;
    }
  }
}
</style>
